<template>

	<div ref="mapDiv">
		<div class="kongJian">
			<div class="kj_qp" @click="qpFun" v-if="kjQpFlag"></div>
			<div class="kj_qxqp" @click="qxqpFun" v-else></div>
			<!-- <kongjian iconUrl="/images/lx_c.png" @checkFlag="kjLxFun" iconCheckUrl="/images/lx.png"></kongjian> -->
			<div class="kj_sx"></div>
			<kongjian iconUrl="/images/lx_c.png" @checkFlag="kjLxFun" :flag="kjLxFlag" iconCheckUrl="/images/lx.png"></kongjian>
			
		</div>
		<layout>
			<template #title>
				<h1 style="color:#fff">这是一个标题</h1>
				<h1 style="color:#fff">这是一个标题</h1>
			</template>
			<template #left>
				<huanjing :ss="ss"></huanjing>
				
				<leftOne></leftOne>
				<leftTwo></leftTwo>
			</template>

			<template #center>
				<ws></ws>
				<!-- <datavmap></datavmap> -->
				<!-- <component is="baidu"></component> -->
				<tianditu :kjLxFlag="kjLxFlag"></tianditu>
				<!-- <mapgeo></mapgeo> -->
			</template>
			<template #right>
				<div style="width: 100%; height: 100%;">
					<!-- <datavmap></datavmap> -->
				</div>
				
				<!-- <BOX title="标题1" :ss="ss" ref="ceshi1"></BOX>
				<BOX title="标题221312" :ss="ss">
					<template #content>
						由内容
					</template>
				</BOX>
				<BOX title="标题3" :ss="ss"></BOX> -->
			</template>
		</layout>
	</div>
	<!-- 引入之后就可以在vue的template中直接使用 -->
</template>
<script lang="ts" setup>
	import tianditu from './components/tianditu.vue';
	// import baidu from './components/baidu.vue'
	import layout from "../../layout/index.vue"
	import leftOne from "./components/leftTopOne.vue"
	import leftTwo from "./components/leftTwo.vue"
	// import { Decoration1, Decoration2, Decoration11, PercentPond, ConicalColumnChart } from '@kjgl77/datav-vue3'
	// import BOX from "@/components/z-box/index.vue"
	import { ref, onMounted, reactive,onBeforeMount,onBeforeUpdate,onUpdated } from "vue"
	import kongjian from "@/components/z-kongjian/index.vue"
	// import datavmap from './components/datavmap.vue';
	// import mapgeo from './components/mapgeo.vue';
	import store from "@/store/index"
	import ws from './components/ws.vue';
	import huanjing from "./components/huanjing.vue"
	// store.dispatch("getApi")
	// store.dispatch("getTdtLx")
	// 调用天气api
	// store.dispatch("getTianQiFun")
	let config = reactive({
		value: 66
	})
	let ceshi1 = ref()
	let ss = ref(true)
	let shouqi = () => {
		// let falge = false
		console.log(ceshi1.value)
		ceshi1.value.contract()
		ss.value = !ss.value
		console.log(ss.value)
	}
	let configs = reactive({
		data: [
			{
				name: '周口',
				value: 55
			},
			{
				name: '南阳',
				value: 120
			},
			{
				name: '西峡',
				value: 71
			},
			{
				name: '驻马店',
				value: 66
			},
			{
				name: '新乡',
				value: 80
			},
			{
				name: '信阳',
				value: 35
			},
			{
				name: '漯河',
				value: 15
			}
		],
		showValue: true,
		textColor: "#000"
		// img: [
		//   '/img/conicalColumnChart/1st.png',
		//   '/img/conicalColumnChart/2st.png',
		//   '/img/conicalColumnChart/3st.png',
		//   '/img/conicalColumnChart/4st.png',
		//   '/img/conicalColumnChart/5st.png',
		//   '/img/conicalColumnChart/6st.png',
		//   '/img/conicalColumnChart/7st.png'
		// ]
	})
	// console.log("这是index的 setup")
	onMounted(() => {
		// console.log("这是index的 onMounted")
		// kjLxFlag.value = store.state.tiandituConfig.lxFlag
		// console.log(kjLxFlag.value,122)
	})
	
	onBeforeMount(()=>{
		// console.log("这是index的 onBeforeMount")
	})
	onBeforeUpdate(()=>{
		// console.log("父组件的 onBeforeUpdate这是index的 ")
	})
	
	onUpdated(()=>{
		// console.log("父组件的 onUpdated这是index的 ")
	})
	const mapDiv = ref()
	// 全屏图标切换使用
	const kjQpFlag = ref(true)
	const qpFun = () => {
		kjQpFlag.value = false
		let element = mapDiv.value
		console.log(element, 118)
		if (element.requestFullscreen) {
			element.requestFullscreen();
		} else if (element.mozRequestFullScreen) {   // 兼容火狐
			element.mozRequestFullScreen();
		} else if (element.webkitRequestFullscreen) {    // 兼容谷歌
			element.webkitRequestFullscreen();
		} else if (element.msRequestFullscreen) {   // 兼容IE
			element.msRequestFullscreen();
		}

	}

	const qxqpFun = () => {
		kjQpFlag.value = true
		// let element = mapDiv.value
		if (document.exitFullscreen) {
			document.exitFullscreen();
		} else if (document.mozCancelFullScreen) {
			document.mozCancelFullScreen();
		} else if (document.webkitCancelFullScreen) {
			document.webkitCancelFullScreen();
		} else if (document.msExitFullscreen) {
			document.msExitFullscreen();
		}


	}
	// 路线的装填值
	const kjLxFlag = ref(false)
	kjLxFlag.value = store.state.tiandituConfig.lxFlag
	const kjLxFun = (flag)=>{
		// console.log(flag)
		kjLxFlag.value = flag
		let obj = store.state.tiandituConfig
		obj.lxFlag = flag
		store.dispatch("setTdtConfig",obj)
		
	}
</script>
<style scoped>
	.kongJian {
		position: absolute;
		left: 50%;
		top: 11vh;
		transform: translate(-50%);
		z-index: 404;
		display: flex;
		background-color: #0b24528a;
		padding: 4px 10px;
		border-radius: 2px;
	}

	.kj_qp {
		width: 30px;
		height: 30px;
		background-image: url("../../assets/qp.png");
		background-size: contain;
	}

	.kj_qp:hover {
		width: 30px;
		height: 30px;
		background-image: url("../../assets/qp_c.png");
		background-size: contain;
	}

	.kj_qxqp {
		width: 30px;
		height: 30px;
		background-image: url("../../assets/qxqp.png");
		background-size: contain;
	}

	.kj_qxqp:hover {
		width: 30px;
		height: 30px;
		background-image: url("../../assets/qxqp_c.png");
		background-size: contain;
	}

</style>